<template>
	<view>
		<view class="p-10">
			<u-collapse :value="showMoreKeys" ref="collapse">
				<u-collapse-item name="1">
					<template #title>
						<view class="content-item-title"><text class="title-txt">本年度爆破计划总量</text></view>
					</template>
					<view class="charts-box">
						<qiun-data-charts type="ring" :opts="opts" :chartData="chartData" />
					</view>
				</u-collapse-item>

				<u-collapse-item name="2">
					<template #title>
						<view class="content-item-title"><text class="title-txt">本年度累计爆破总量</text></view>
					</template>
					<view class="charts-box">
						<qiun-data-charts type="ring" :opts="opts1" :chartData="chartData1" />
					</view>
				</u-collapse-item>

				<u-collapse-item name="3">
					<template #title>
						<view class="content-item-title"><text class="title-txt">本年度累计爆破孔数</text></view>
					</template>
					<view class="charts-box">
						<qiun-data-charts type="ring" :opts="opts2" :chartData="chartData2" />
					</view>
				</u-collapse-item>

				<u-collapse-item name="4">
					<template #title>
						<view class="content-item-title"><text class="title-txt">本年度累计使用炸药</text></view>
					</template>
					<view class="charts-box">
						<qiun-data-charts type="ring" :opts="opts3" :chartData="chartData3" />
					</view>
				</u-collapse-item>

				<u-collapse-item name="5">
					<template #title>
						<view class="content-item-title"><text class="title-txt">趋势分析</text></view>
					</template>
					<view class="charts-box">
						<qiun-data-charts type="area" :opts="opts4" :chartData="chartData4" ontouch />
					</view>
				</u-collapse-item>

				<u-collapse-item name="6">
					<template #title>
						<view class="content-item-title"><text class="title-txt">爆破任务评价</text></view>
					</template>
					<scroll-view scroll-y style="height: 300px">
						<my-table :data="list" :columns="columns" />
					</scroll-view>
				</u-collapse-item>
			</u-collapse>
		</view>
	</view>
</template>

<script setup>
import { getByApiCode } from '@/api/customApi';

const collapse = ref(null),
	showMoreKeys = ref([1, 2, 3, 4, 5, 6]);
/*********************************************本年度爆破计划总量**********************************/
const chartData = ref({}),
	opts = {
		color: ['#1890FF', '#91CB74', '#FAC858', '#EE6666', '#73C0DE', '#3CA272', '#FC8452', '#9A60B4', '#ea7ccc'],
		padding: [0, 0, 0, 0],
		dataLabel: true,
		legend: {
			show: true,
			position: 'top',
			padding: 0,
			margin: 10,
			fontSize: 12,
			itemGap: 10
		},
		title: {
			name: 0,
			fontSize: 25,
			color: '#000'
		},
		subtitle: false,
		extra: {
			ring: {
				ringWidth: 30,
				activeOpacity: 0.5,
				activeRadius: 10,
				offsetAngle: 0,
				labelWidth: 15,
				border: true,
				borderWidth: 3,
				borderColor: '#FFFFFF',
				linearType: 'custom'
			}
		}
	};

function fn() {
	getByApiCode({
		apiCode: 'benniandubaopojihuazongliang',
		propertyMapping: {
			s: 'depart_name',
			y: 'plan'
		}
	}).then((res) => {
		let total = 0;
		res.data.forEach((item) => {
			item.name = item.s;
			item.value = item.y * 1;
			total = total + item.value;
			delete item.s;
			delete item.y;
		});
		opts.title.name = total;
		chartData.value = JSON.parse(
			JSON.stringify({
				series: [
					{
						data: res.data
					}
				]
			})
		);
	});
}

/*********************************************本年度累计爆破总量**********************************/
const chartData1 = ref({}),
	opts1 = {
		...opts,
		title: {
			name: 0,
			fontSize: 25,
			color: '#000'
		}
	};

function fn1() {
	getByApiCode({
		apiCode: 'bennianduleijibaopozongliang',
		propertyMapping: {
			s: 'depart_name',
			y: 'actual'
		}
	}).then((res) => {
		let total = 0;
		res.data.forEach((item) => {
			item.name = item.s;
			item.value = item.y * 1;
			total = total + item.value;
			delete item.s;
			delete item.y;
		});
		opts1.title.name = total;
		chartData1.value = JSON.parse(
			JSON.stringify({
				series: [
					{
						data: res.data
					}
				]
			})
		);
	});
}

/*********************************************本年度累计爆破孔数**********************************/
const chartData2 = ref({}),
	opts2 = {
		...opts,
		title: {
			name: 0,
			fontSize: 25,
			color: '#000'
		}
	};

function fn2() {
	getByApiCode({
		apiCode: 'bennianduleijibaopokongshu',
		propertyMapping: {
			s: 'dept_name',
			y: 'hole_num'
		}
	}).then((res) => {
		let total = 0;
		res.data.forEach((item) => {
			item.name = item.s;
			item.value = item.y * 1;
			total = total + item.value;
			delete item.s;
			delete item.y;
		});
		opts2.title.name = total;
		chartData2.value = JSON.parse(
			JSON.stringify({
				series: [
					{
						data: res.data
					}
				]
			})
		);
	});
}

/*********************************************本年度累计使用炸药**********************************/
const chartData3 = ref({}),
	opts3 = {
		...opts,
		title: {
			name: 0,
			fontSize: 25,
			color: '#000'
		}
	};

function fn3() {
	getByApiCode({
		apiCode: 'bennianduleijishiyongzhayao',
		propertyMapping: {
			s: 'dept_name',
			y: 'use_quantity'
		}
	}).then((res) => {
		let total = 0;
		res.data.forEach((item) => {
			item.name = item.s;
			item.value = item.y * 1;
			total = total + item.value;
			delete item.s;
			delete item.y;
		});
		opts3.title.name = total.toFixed();
		chartData3.value = JSON.parse(
			JSON.stringify({
				series: [
					{
						data: res.data
					}
				]
			})
		);
	});
}

/*********************************************趋势分析**********************************/
const chartData4 = ref({}),
	opts4 = {
		color: ['#1890FF'],
		padding: [10, 0, 0, 0],
		enableScroll: true,
		dataLabel: false,
		legend: {
			position: 'top',
			show: true
		},
		xAxis: {
			itemCount: 5
		},
		yAxis: {
			gridType: 'dash',
			showTitle: true,
			data: [
				{
					min: 0,
					title: '立方米',
					titleOffsetX: -15,
					titleOffsetY: -10
				}
			]
		},
		extra: {
			area: {
				type: 'curve',
				opacity: 0.2,
				addLine: true,
				width: 2,
				gradient: true,
				activeType: 'hollow'
			}
		}
	};

function fn4() {
	getByApiCode({
		apiCode: 'qushifenxituyi',
		propertyMapping: {
			x: 'months',
			y1: 'bpl'
		}
	}).then((res) => {
		const groups = res.data.reduce(
			(groups, person) => {
				groups.categories.push(person.x);
				groups.y1.push(person.y1);
				return groups;
			},
			{
				categories: [],
				y1: []
			}
		);

		chartData4.value = JSON.parse(
			JSON.stringify({
				categories: groups.categories,
				series: [
					{
						name: '爆破量',
						data: groups.y1
					}
				]
			})
		);
	});
}

/*********************************************爆破任务评价**********************************/
const columns = [
		{
			label: '时间',
			prop: '时间',
			width: '160'
		},
		{
			label: '作业地点名称',
			prop: '作业地点名称',
			width: '150'
		},
		{
			label: '大块率',
			prop: '大块率',
			width: '70'
		},
		{
			label: '效果',
			prop: '效果',
			width: '50'
		}
	],
	list = ref([]);

function fn5() {
	getByApiCode({
		apiCode: 'baopopingjia',
		pageIndex: 1,
		pageSize: 10,
		propertyMapping: {
			作业地点名称: 'explosive_pile_name',
			大块率: 'bulkrate',
			效果: 'case',
			时间: 'sj'
		},
		total: true
	}).then((res) => {
		list.value = res.data;
	});
}

function getServerData(refresh) {
	Promise.all([fn(), fn1(), fn2(), fn3(), fn4(), fn5()]).then(() => {
		if (refresh) {
			nextTick(() => {
				uni.stopPullDownRefresh();
			});
		}
		setTimeout(() => {
			nextTick(() => {
				collapse.value.init();
			});
		}, 400);
	});
}

onShow(() => {
	getServerData();
});

onPullDownRefresh(() => {
	getServerData(true);
});
</script>
